/*
  学习目标：jsx使用注意事项
*/
import React from 'react';
import ReactDOM from 'react-dom';

const ulNode2 = (
  // 1. 必须有根标签 , 类似vue2中, 必须使用template标签包住兄弟节点
  //👍 <></> 包住兄弟节点 , 作用等价于 React.Fragment 作为空标签
  <>
    <ul className="list">
      <li>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
    <ul className="list">
      <li>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
    {/* 2. 必须有闭合标记 */}
    <input type="text" id="ipt" />
    <label htmlFor="ipt">点我等同于点了input</label>

    {/* 3. 关键字冲突:
    class  => className
    for => htmlFor */}
  </>
);

ReactDOM.render(ulNode2, document.getElementById('root'));

// 总结:
// 1. 类似vue2, 必须有根标签, 推荐👍<></>包住兄弟节点
// 2. 标签必须有闭合标记
// 3. 关键字冲突:
// 3.1. class => className
// 3.2. for => htmlFor
